<!DOCTYPE html>
<!--
    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
     KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
-->
<html>
<head>
    <!--
    Customize this policy to fit your own app's needs. For more guidance, see:
        https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
    Some notes:
        * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
        * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
        * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
            * Enable inline JS: add 'unsafe-inline' to default-src
    -->
    <meta charset="utf-8"/>
    <!--        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">-->
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport"
          content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <title>Hello World</title>
    <script>
        var pictureSource;
        var destinationType;
        document.addEventListener("deviceready", onDeviceReady, false);
        function onDeviceReady() {
            console.log(navigator.camera);

            pictureSource = navigator.camera.PictureSourceType;
            destinationType = navigator.camera.DestinationType;
        }

        function onPhotoDataSuccess(imageData) {
            console.log(imageData);
            var smallImage = document.getElementById('smallImage');
            smallImage.style.display = 'block';
            smallImage.src = "data:image/jpeg;base64," + imageData;

        }

        function onPhotoURISuccess(imageURI) {
            console.log(imageURI);
            var largeImage = document.getElementById('largeImage');
            largeImage.style.display = 'block';
            largeImage.src = imageURI;
        }

        function capturePhoto() {
            try {
                navigator.camera.getPicture(onPhotoDataSuccess, onFail,
                        {quality: 50, destinationType: Camera.DestinationType.DATA_URL});

            } catch (e) {

                alert(e);
            }
        }


        function capturePhotoEdit() {

            try {
                navigator.camera.getPicture(onPhotoDataSuccess, onFail,
                        {quality: 20, allowEdit: true, destinationType: Camera.DestinationType.DATA_URL});

            } catch (e) {
                alert(e);
            }

        }


        function getPhoto(source) {

            try {
                navigator.camera.getPicture(onPhotoURISuccess, onFail, {
                    quality: 50,
                    destinationType: Camera.DestinationType.FILE_URI,
                    sourceType: source
                });

            } catch (e) {
                alert(e);
            }


        }
        function onFail(message) {
            alert('Failed because: ' + message);
        }

        function scuessPlugin() {
            alert("自定义插件调用成功")
        }

        function failePlugin() {
            alert("自定义插件调用失败")
        }
    
        function testMyFirstPlugin(){
            myFirstPlugin.greetHello("撒个大概",scuessPlugin,failePlugin);
        }
    
    </script>

</head>
<body>
<div>
    <br><br>
    <div id="deviceinfo">

    </div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>

<button onclick="testOtherInfo()">测试其它</button>

<div>
    <button onclick="testGetDeviceInfo()">获取设备信息</button>
</div>


<br>

<div>

    <button onclick="capturePhoto()">拍照</button>
    <button onclick="capturePhotoEdit()">拍照(可编辑)</button>
    <button onclick="getPhoto(pictureSource.PHOTOLIBRARY)">图库</button>
    <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM)">相册</button>
    <br>
    <button onclick="testMyPlugin()">自定义插件</button>
    
    
    <button onclick="testWriteLocalstroge()">测试写存储</button>
    <button onclick="testReadLocalstroge()">测试读存储</button>
    
    <button onclick="testMyFirstPlugin()">我的自定义插件MyFirstPlugin</button>
    
    
    
    <img style="display:none;width:120px;height:120px;" id="smallImage" src=""/>
    <img style="display:none;width:200px;height:200px" id="largeImage" src=""/>
</div>



<script>
    
    function testWriteLocalstroge(){
        
        var db = window.openDatabase("3215132551", "ertt", "haha", 10240000);
        db.transaction(function (tx) {
                       tx.executeSql(sqlStatement, valueArray, function (tx, result) {
                                     console.log(result);
                                     }, function (error) {
                                     console.log(error);
                                     });
                       });
        
        
        
        var storage = window.localStorage;
       // var value = storage.getItem("hello");
       storage.setItem("key1", "value1");
       
    }
    
    function testReadLocalstroge(){
        var storage = window.localStorage;
        var value = storage.getItem("key1"); // 传递键的名字获取对应的值。
    
    alert(value);
    }

    function testScuess(data){
        alert(data);
        
    }
    function testFaile(data){
          alert(data);
    }
    
    function testMyPlugin(){
        cordova.exec(testScuess,testFaile,"TestDemo","showAlertDemo",[]);
    }
    
    
    function testOtherInfo() {

        try {


        } catch (e) {

            alert(e);
        }

    }
    
    
    
    function testGetDeviceInfo() {
        var deviceInfo = document.getElementById('deviceinfo');
        deviceInfo.innerHTML = device.platform + '  ' +
                device.cordova + '  ' +
                device.model + '  ' +
                device.uuid + '  ' +
                device.platform + '  ' +
                device.version + '  ';
//
//                console.info(device);
//                console.info(device.cordova);   //获取当前cordova的版本，‘’
//                console.info(device.model);     //device.model返回设备的模型或产品名称。该值由设备制造商设置，并且可能在同一产品的不同版本中不同。
//                console.info(device.uuid);      //获取设备通用唯一标识uuid，例如：‘78ca1fe2c1d3b584’
//                console.info(device.platform);  //获取操作系统名称，例如：‘Android’
//                console.info(device.version);   //获取操作系统版本，例如：‘4.4.4’
//                console.info(device.isVirtual); //判断设备是否在虚拟机上运行，在‘VS Emulator’返回false，所以这个不一定确实
//                console.info(device.serial);    //获取设备序列号，例如：‘unknown’
//                console.info(device.manufacturer);//获取设备制造商，例如：‘VS Emulator’
    }



</script>



</body>
</html>
